<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" charset="utf-8" />
<title>京东右侧浮动栏</title>
<style>
*{
padding:0px;
margin:0px;
}
.small-one ul li,.small-tow ul li{
list-type:none;
}
.big-box{
width:80px;
height:1200px;
background:pink;
position:absolute;
right:0;
top:0;}
.small-one{
width:30px;
height:400px;
position:relative;
right:0;
top:0;
margin-right:100px;
}
.small-one li
{display:block;
width:30px;
height:70%;
position:fixed;
right:40px;
bottom:0;
}
.small-tow{
width:30px;
height:400px;
position:relative;
right:0;
top:0;
margin-right:100px;
}
.small-tow li{
display:block;
width:30px;
height:15%;
position:fixed;
right:40px;
bottom:0px;
}
h1{
text-align:center;
}
	</style>
</head>
<body>
<div class="big-box">
  <div class="small-one">
    <ul>
      <li><img src="11.jpg" alt="浮动导航"><img src="11.jpg" alt="浮动导航"><img src="11.jpg" alt="浮动导航"><img src="11.jpg" alt="浮动导航"></li>
    </ul>
  </div>
  <div class="small-tow">
    <ul>
      <li><img src="11.jpg" alt="浮动导航"><img src="11.jpg" alt="浮动导航"></li>
    </ul>
  </div>
</div>
<h1>123456</h1>
</body>
</html>
